<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 | 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        warning: '#FF9F43',
                        danger: '#FF5252',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px rgba(22, 93, 255, 0.15);
            }
            .stat-number {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm fixed w-full top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-shield text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-dark">管理后台</h1>
        </div>
        <div class="flex items-center space-x-6">
            <div class="hidden md:flex items-center space-x-4">
                <a href="#" class="text-primary font-medium">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">数据统计</a>
            </div>
            <div class="flex items-center space-x-3">
                <button class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bell-o text-lg"></i>
                </button>
                <!-- 用户头像下拉菜单 -->
                <div class="relative" id="userMenuContainer">
                    <button id="userMenuButton" class="flex items-center space-x-1 focus:outline-none">
                        <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                        <i class="fa fa-angle-down text-gray-500"></i>
                    </button>
                    <!-- 下拉菜单内容 -->
                    <div id="userMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden dropdown-shadow animate-fade-in">
                        <div class="px-4 py-3 border-b border-gray-100">
                            <p class="text-sm font-medium">管理员</p>
                            <p class="text-xs text-gray-500">admin@example.com</p>
                        </div>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                            <i class="fa fa-user-o mr-2"></i>个人信息
                        </a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                            <i class="fa fa-cog mr-2"></i>账户设置
                        </a>
                        <div class="border-t border-gray-100 mt-1"></div>
                        <a href="/volunteer/index.jsp" class="block px-4 py-2 text-sm text-danger hover:bg-gray-50">
                            <i class="fa fa-sign-out mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto pt-24 pb-16 px-4">
    <!-- 欢迎信息 -->
    <div class="mb-8">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">欢迎回来，管理员</h2>
        <p class="text-gray-600">今天是 <span id="current-date"></span>，以下是系统概览</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
        <!-- 用户统计 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm font-medium">用户总数</p>
                    <h3 class="stat-number bg-gradient-to-r from-primary to-blue-400 text-3xl font-bold mt-1">${usersCount}</h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                    <i class="fa fa-users text-primary text-xl"></i>
                </div>
            </div>
            <div class="flex items-center text-sm">
                    <span class="text-secondary flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 12.5%
                    </span>
                <span class="text-gray-400 ml-2">较上周</span>
            </div>
        </div>

        <!-- 志愿者统计 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm font-medium">志愿者总数</p>
                    <h3 class="stat-number bg-gradient-to-r from-secondary to-green-400 text-3xl font-bold mt-1">${volunteersCount}</h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
                    <i class="fa fa-heart text-secondary text-xl"></i>
                </div>
            </div>
            <div class="flex items-center text-sm">
                    <span class="text-secondary flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 8.3%
                    </span>
                <span class="text-gray-400 ml-2">较上周</span>
            </div>
        </div>

        <!-- 组织统计 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm font-medium">组织总数</p>
                    <h3 class="stat-number bg-gradient-to-r from-warning to-orange-400 text-3xl font-bold mt-1">${organizationsCount}</h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
                    <i class="fa fa-sitemap text-warning text-xl"></i>
                </div>
            </div>
            <div class="flex items-center text-sm">
                    <span class="text-secondary flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 5.7%
                    </span>
                <span class="text-gray-400 ml-2">较上周</span>
            </div>
        </div>

        <!-- 待审核统计 -->
        <div class="bg-white rounded-xl p-6 card-shadow card-hover">
            <div class="flex justify-between items-start mb-4">
                <div>
                    <p class="text-gray-500 text-sm font-medium">待审核活动</p>
                    <h3 class="stat-number bg-gradient-to-r from-danger to-red-400 text-3xl font-bold mt-1">${pendingReviewsCount}</h3>
                </div>
                <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center">
                    <i class="fa fa-clock-o text-danger text-xl"></i>
                </div>
            </div>
            <div class="flex items-center text-sm">
                    <span class="text-danger flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 3.2%
                    </span>
                <span class="text-gray-400 ml-2">较上周</span>
            </div>
        </div>
    </div>

    <!-- 数据图表和操作区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 数据趋势图 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
            <div class="flex justify-between items-center mb-6">
                <h3 class="font-bold text-lg">用户增长趋势</h3>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full">周</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">月</button>
                    <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">年</button>
                </div>
            </div>
            <div class="h-64">
                <!-- 图表将通过JavaScript渲染 -->
                <canvas id="growthChart"></canvas>
            </div>
        </div>

        <!-- 快捷操作区 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <h3 class="font-bold text-lg mb-6">快捷操作</h3>
            <div class="space-y-4">
                <a href="/volunteer/users/list" class="block p-4 bg-primary/5 rounded-lg flex items-center space-x-3 hover:bg-primary/10 transition-colors">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-user-circle-o text-primary"></i>
                    </div>
                    <div>
                        <h4 class="font-medium">信息管理</h4>
                        <p class="text-xs text-gray-500">管理用户、志愿者和组织信息</p>
                    </div>
                </a>
                <a href="/volunteer/activityreview" class="block p-4 bg-secondary/5 rounded-lg flex items-center space-x-3 hover:bg-secondary/10 transition-colors">
                    <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center">
                        <i class="fa fa-calendar-check-o text-secondary"></i>
                    </div>
                    <div>
                        <h4 class="font-medium">活动管理</h4>
                        <p class="text-xs text-gray-500">审核和管理志愿活动</p>
                    </div>
                </a>
                <a href="#" class="block p-4 bg-gray-50 rounded-lg flex items-center space-x-3 hover:bg-gray-100 transition-colors">
                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                        <i class="fa fa-cog text-gray-500"></i>
                    </div>
                    <div>
                        <h4 class="font-medium">系统设置</h4>
                        <p class="text-xs text-gray-500">配置系统参数和管理权限</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-gray-500 text-sm mb-4 md:mb-0">
                © 2025 志愿者管理系统. 保留所有权利.
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-question-circle"></i> 帮助中心
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-file-text-o"></i> 服务条款
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-shield"></i> 隐私政策
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<script>
    // 设置当前日期
    document.addEventListener('DOMContentLoaded', function() {
        const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        const currentDate = new Date().toLocaleDateString('zh-CN', dateOptions);
        document.getElementById('current-date').textContent = currentDate;

        // 初始化图表
        const ctx = document.getElementById('growthChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [
                    {
                        label: '用户',
                        data: [120, 190, 175, 210, 240, 230, 280],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '志愿者',
                        data: [80, 105, 95, 130, 140, 160, 180],
                        borderColor: '#36D399',
                        backgroundColor: 'rgba(54, 211, 153, 0.1)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            drawBorder: false
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });
    });
    // 用户菜单交互逻辑
    const userMenuButton = document.getElementById('userMenuButton');
    const userMenu = document.getElementById('userMenu');
    const userMenuContainer = document.getElementById('userMenuContainer');

    // 点击头像按钮切换菜单显示/隐藏
    userMenuButton.addEventListener('click', function(e) {
        e.stopPropagation();
        userMenu.classList.toggle('hidden');
        // 添加动画效果
        if (!userMenu.classList.contains('hidden')) {
            userMenu.classList.add('animate-fade-in');
        }
    });

    // 点击页面其他区域关闭菜单
    document.addEventListener('click', function(e) {
        if (!userMenuContainer.contains(e.target)) {
            userMenu.classList.add('hidden');
        }
    });

    // 添加键盘ESC键关闭菜单
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            userMenu.classList.add('hidden');
        }
    });

</script>
</body>
</html>